<script>
/* 数据源-父 */

import EtlData from './EtlData';
import CloudData from './CloudData';
import RelationData from './RelationData';

export default {
  name: 'DataSource',
  components: { EtlData, CloudData, RelationData },
  data() {
    return {
      labelEtl: h => this.setTabsIcon(h, 'datasource-etl', 'KTOP-ETL'),
      labelCloud: h => this.setTabsIcon(h, 'datasource-cloud', '云盘数据源'),
      labelRelation: h => this.setTabsIcon(h, 'datasource-relation', '关系数据源'),
      labelFile: h => this.setTabsIcon(h, 'datasource-file', '文件数据'),
      labelMore: h => this.setTabsIcon(h, 'datasource-more', '第三方数据源'),
      labelMap: h => this.setTabsIcon(h, 'datasource-mapserver', '地图服务'),
    };
  },
  mounted() {},
  methods: {
    setTabsIcon(h, iconClass, lable, isActive) {
      return h('div', [
        h('SvgIcon', {
          props: {
            iconClass: iconClass,
          },
        }),
        h(
          'span',
          {
            style: {
              marginLeft: '8px',
            },
          },
          lable
        ),
      ]);
    },
  },
};
</script>

<template>
  <Tabs>
    <TabPane
      :label="labelEtl">
      KTOP-ETL</TabPane>
    <TabPane :label="labelCloud">
      <CloudData></CloudData>
    </TabPane>
    <TabPane :label="labelRelation">
      <RelationData/>
    </TabPane>
    <TabPane :label="labelFile">文件数据</TabPane>
    <TabPane :label="labelMore">第三方数据源</TabPane>
    <TabPane :label="labelMap">地图服务</TabPane>
  </Tabs>
</template>

<style lang="less" scoped>
.svgactive .k-tabs /deep/ .k-tabs-tab:hover .k-svgicon > svg {
  fill: #2d8cf0 !important;
}

.svgactive .k-tabs /deep/ .k-tabs-tab-active .k-svgicon > svg {
  fill: #2d8cf0 !important;
}

.k-tabs-tabpane {
  height: 550px;
}
</style>
